<template>
  <div class="home">
    <el-container>
      <el-aside width="200">
        <div class="logo"></div>
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          :router="true"
        >
          <qf-sub-menu :sideMenu="MenuList"></qf-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-row style="flex" justify="space-between">
            <el-col :span="6">
              <div class="grid-content">
                <i
                  class="iconfont icon-shouqi"
                  @click="isCollapse = !isCollapse"
                  style="font-size:36px;cursor: pointer;"
                ></i>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">学生管理系统</div>
            </el-col>
            <el-col :span="6">
              <div class="block">
                <el-avatar
                  :size="46"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                ></el-avatar>
                <span class="username">{{ userInfo.nickname }}</span>
                <span @click="quit" class="quit">退出</span>
              </div>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Welcome' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item
              :to="{ path: item.path }"
              v-for="(item, index) in crumlist"
              :key="index"
              >{{ item.meta.name }}</el-breadcrumb-item
            >
          </el-breadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
//引入state的辅助函数
import { mapState } from "vuex";
//引入actions的辅助函数
import { mapActions } from "vuex";

export default {
  data() {
    return {
      isCollapse: false,
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      sizeList: ["large"],
      name: "sub-menu", //给组件取名字之后 可以递归
      props: {
        sideMenu: {
          type: Array,
          default: () => [] //定义默认数据
        }
      }
    };
  },
  methods: {
    quit() {
      //移除存储token，userinfo,permission的仓库
      localStorage.removeItem("stu-login-token");
      localStorage.removeItem("stu-userinfo");
      localStorage.removeItem("stu-permission-buttons")
      //同时强制跳转到登陆页面
      this.$router.push("/login");
      //弹出提示框
      this.$message({ message: "账户已注销！", type: "success" });
    },
    ...mapActions(["FETCH_MENULIST"])
  },
  computed: {
    ...mapState(["userInfo"]),
    ...mapState(["MenuList"]),
    ...mapState(["crumlist"])
  },
  mounted() {
    this.FETCH_MENULIST(); //或者标准写法this.$store.dispatch("FETCH_MENULIST")
  }
};
</script>
<style>
.home {
  width: 100%;
  height: 100%;
}
.home .el-container {
  width: 100%;
  height: 100%;
}
.home .el-container .logo {
  width: 100%;
  height: 60px;
  display: block;
  background: url("../../../public/imgs/怡云，LOGO.png") no-repeat;
  background-size: contain;
}
.home .el-header {
  position: relative;
  background-color: #8ec5fc;
  background-image: linear-gradient(6deg, #8ec5fc 0%, #bb8de6 100%);
  color: white;
}
.home .el-header .grid-content {
  display: flex;
  align-items: center;
  height: 60px;
  overflow: hidden;
}
.home .el-header .logo {
  width: 100px;
  height: 60px;
  background: url("../../../public/imgs/logo.png");
}
.home .el-header .block {
  display: flex;
  height: 60px;
  align-items: center;
  position: absolute;
  right: 50px;
}
.home .el-header .block .username {
  margin-left: 5px;
}
.home .el-header .block .quit {
  margin-left: 25px;
  cursor: pointer;
}
.home .el-header .block .quit:hover {
  transform: scale(1.2);
  transition: 0.5s linear;
  text-decoration: underline;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-main {
  background: #fff;
}
.home .el-aside {
  background-color: #8ec5fc;
  background-image: linear-gradient(6deg, #8ec5fc 100%, #e0c3fc 0%);
  color: white;
}
.home .el-aside .el-radio-group {
  margin-left: 25px;
}
.home .el-aside .el-menu {
  background: rgba(255, 255, 255, 0.65);
}
</style>
